<template>
  <div class="bg-gray-100 min-h-screen p-6">
    <h1 class="text-center text-xl font-bold mb-4">注册新用户</h1>
    <!-- 主表单容器（明确白底） -->
    <div class="max-w-md mx-auto border border-gray-300 bg-white p-4">
      <!-- 账号信息 -->
      <table class="w-full" cellpadding="8">
        <tr><td class="w-1/3 text-right pr-4">用户名</td><td><input class="inp"></td></tr>
        <tr><td class="text-right pr-4">登陆邮箱</td><td><input type="email" class="inp"></td></tr>
        <tr><td class="text-right pr-4">密码</td><td><input type="password" class="inp"></td></tr>
        <tr><td class="text-right pr-4">再输一次</td><td><input type="password" class="inp"></td></tr>
      </table>
      
      <hr class="border-gray-300 my-2">
      
      <!-- 个人资料 -->
      <div class="text-center font-medium py-2">个人资料</div>
      <table class="w-full" cellpadding="6">
        <tr>
          <td class="w-1/3 text-right pr-4">性别</td>
          <td><label><input type="radio" name="g"> 男士</label> <label><input type="radio" name="g" checked> 女士</label></td>
        </tr>
        <tr><td class="text-right pr-4">学历</td><td><select class="inp"><option>高中</option><option>专科</option><option selected>本科</option><option>硕士</option><option>博士</option></select></td></tr>
        <tr><td class="text-right pr-4">职业</td><td><select class="inp"><option selected>在校学生</option><option>教师</option><option>工程师</option><option>医生</option><option>其他</option></select></td></tr>
        <tr><td class="text-right pr-4">所在城市</td><td><select class="inp"><option selected>帝都</option><option>魔都</option><option>广州</option><option>深圳</option><option>其他</option></select></td></tr>
        <tr>
          <td class="text-right pr-4">出生年月</td>
          <td><select class="inp" style="width:80px"><option v-for="y in 71" :value="1950+y" :selected="y===35">{{1950+y}}</option></select>
              <select class="inp" style="width:60px"><option v-for="m in 12" :value="m" :selected="m===1">{{m}}月</option></select></td>
        </tr>
        <tr>
          <td class="text-right pr-4">猜你喜欢</td>
          <td><label><input type="checkbox"> 体育</label> <label><input type="checkbox" checked> 音乐</label> <label><input type="checkbox"> 游戏</label> <label><input type="checkbox"> 八卦</label> <label><input type="checkbox"> 吐槽</label></td>
        </tr>
        <tr>
          <td></td>
          <td><label><input type="checkbox"> 我已阅读并接受<a href="#" class="text-blue-600">注册条款</a></label></td>
        </tr>
      </table>
      
      <div class="text-center p-4">
        <button class="btn">注册</button>
        <button class="btn ml-4">重置</button>
      </div>
    </div>
  </div>
</template>

<script setup></script>

<style scoped>
/* 明确白底样式，确保覆盖 */
.bg-white {
  background-color: #ffffff !important;
}
.inp { 
  border:1px solid #999; 
  height:24px; 
  padding:0 4px; 
  width:100%; 
  outline:none; 
  background: #fff; /* 输入框白底 */
}
.btn { 
  border:1px solid #999; 
  background:#f0f0f0; 
  padding:2px 10px; 
  cursor:pointer; 
}
td { padding:4px 0; }
input[type=radio], input[type=checkbox] { margin-right:4px; }
select { 
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); 
  background-repeat:no-repeat; 
  background-position:right 4px center; 
  padding-right:20px; 
}
</style>